<template>
  <div>
    <div class="tableFootContaienr" :style="props.scroll.isFixed ? styleWidth : ''" :class="scroll.isFixed
      ? 'table-bottom_fiexd'
      : props.showCheckDelete
        ? ''
        : 'tableFootContaienrEnd'
      " v-if="props.showCheckDelete || props.showPagination">
      <div class="checkDelete" v-if="showCheckDelete">
        <a-checkbox v-model:checked="props.selfChecked" @change="checkChange">全选</a-checkbox>
        <slot name="opration"></slot>
        <!-- <a-button :style="{ 'margin-left': '8px' }" @click="deleteRecords" :disabled="!props.isSelect">删除</a-button> -->
      </div>
      <div v-else></div>
      <slot v-if="true">
        <!-- 分页器 -->
        <div class="paginationSetting">
          <div class="paginationSettingtext">
            <span> 共 {{ props.total }} 条 </span>
          </div>
          <div class="paginations">
            <a-pagination :current="pageCurrent" :size="size ? size : 'small'"
              :page-size-options="['5', '10', '20', '30', '40']" :total="props.total" show-size-changer :simple="true"
              show-quick-jumper :page-size="simpleSize" @change="pageChange">
              <template slot="buildOptionText" slot-scope="props">
                <span>{{ props.pageSize }}条/页</span>
              </template>
              <template #itemRender="{ type, originalElement }">
                <a v-if="type === 'prev'" class="iconS"><i class="iconfont icon-left"></i></a>
                <a v-else-if="type === 'next'" class="iconS"><i class="iconfont icon-right"></i></a>
                <component :is="originalElement" v-else></component>
              </template>
            </a-pagination>
            <!-- <span v-show="pageSize < props.total && !props.simple" style="font-size: 14px">页</span> -->
            <!-- <a-input v-show="pageSize < props.total && !props.simple" class="paginations-input" v-model:value="inputValue"
              placeholder="" :max-length="25" @blur="onBlur" @pressEnter="inputChange" @input="checkNumber"
              ref="jumpIpt" /> -->
            <a-input class="paginations-input-simple" v-model:value="pageCurrent" placeholder="" @blur="onBlur"
              @pressEnter="inputChange" @input="checkNumber" ref="jumpIpt" />
            <!-- <a-select class="simple-select" v-show="props.simple" v-model:value="simpleSize"
 -->
            <a-select class="simple-select" v-model:value="simpleSize" style="width: 92px;height: 24px;"
              :options="sizeOptions" @change="onSelectSize"></a-select>

          </div>
        </div>
      </slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch, onMounted, nextTick } from "vue";
import paginationProps from "./paginationConfig/props";
import { useFixeWidth, styleWidth } from "@/hooks/useFixeWidth";
import { systemStore } from "@/store/modules/systemStore";
// type
interface dataType {
  [propName: string]: any;
}
//props
const props = defineProps(paginationProps);

//data

// const columns = ref([]);
let pageCurrent = ref(props.pageCurrent); //当前第几页
let pageSize = ref(props.pageSize || 10); //每页多少行
let currentData = reactive({});
const inputValue = ref("");
const simpleSize = ref<number>(props.pageSize || 10);
const sizeOptions: any = [
  { label: '5条/页', value: 5 },
  { label: '10条/页', value: 10 },
  { label: '20条/页', value: 20 },
  { label: '30条/页', value: 30 },
  { label: '40条/页', value: 40 },
  { label: '200条/页', value: 200 }
]
const pages = ref(Math.ceil(props.total.value / simpleSize.value));

const sysStore = systemStore();
const jumpIpt = ref();
//emit
const emit = defineEmits(["selectAll", "changePage", "deleteRecord"]); //子传父

//methods
//跳转输入框改变事件
const inputChange = (e: any) => {
  // const inputCurrent = Number(inputValue.value);
  // pageCurrent.value = inputCurrent > pages.value ? pages.value : inputCurrent;
  // changePage(pageCurrent.value, pageSize.value);
  jumpIpt.value.blur();
};

//分页器改变事件
const pageChange = (current: number, pagesize: number) => {
  changePage(current, pagesize);
};

//分页器改变事件
const onSelectSize = () => {
  console.log(simpleSize.value);

  changePage(pageCurrent.value, simpleSize.value);
};

//自定义全选
const checkChange = (e: any) => {
  let checkKeys: (string | number)[] = [];
  let checkRows: dataType[] = [];
  let key = props.rowKey;
  if (e.target.checked) {
    const getList = (list: any) => {
      list.map((item: dataType) => {
        checkKeys.push(item[key]);
        checkRows.push(item);
        if (item.children) {
          getList(item.children);
        }
      });
      return checkKeys;
    };
    getList(props.dataSource);
  } else {
    checkKeys = [];
    checkRows = [];
  }
  emit("selectAll", checkKeys, checkRows);
};

const deleteRecords = () => {
  emit("deleteRecord");
};

//只获取数字
const formatNumber = (value: string) => {
  value += "";
  const list = value.split(".");
  const prefix = list[0].charAt(0) === "-" ? "-" : "";
  let num = prefix ? list[0].slice(1) : list[0];
  let result = "";

  while (num.length > 3) {
    result = `,${num.slice(-3)}${result}`;
    num = num.slice(0, num.length - 3);
  }

  if (num) {
    result = num + result;
  }

  return `${prefix}${result}${list[1] ? `.${list[1]}` : ""}`;
};

const format = (val: string, preVal: string) => {
  const reg = /^-?\d*(\.\d*)?$/;

  if ((!isNaN(+val) && reg.test(val)) || val === "" || val === "-") {
    inputValue.value = val;
  } else {
    inputValue.value = preVal;
  }
};

const onBlur = () => {
  console.log()
  const inputCurrent = Number(pageCurrent.value);

  if (inputCurrent > 0) {
    pageCurrent.value = inputCurrent > pages.value ? pages.value : inputCurrent;
    changePage(pageCurrent.value, pageSize.value);
  }
};

const changePage = (current: number, page: number) => {
  pageCurrent.value = current;
  if (simpleSize.value != page) {
    //如果每页行数改变，页码改为1
    pageCurrent.value = 1;
  }
  simpleSize.value = page;

  (pages.value = Math.ceil(props.total / simpleSize.value)),
    emit("changePage", { pageCurrent: pageCurrent.value, pageSize: simpleSize.value });
  inputValue.value = "";
};
const checkNumber = (val: any) => {
  if(pageCurrent.value == 0) {
    pageCurrent.value = ''
    return
  }
  pageCurrent.value = pageCurrent.value.replace(/[^0-9]/g, '');
  console.log(pageCurrent.value, Math.ceil(props.total / simpleSize.value), 'Math.ceil(props.total / simpleSize)')
  if (pageCurrent.value > Math.ceil(props.total / simpleSize.value)) {
    pageCurrent.value = Math.ceil(props.total / simpleSize.value)
  } else if (pageCurrent.value < 0) {
    pageCurrent.value = 1
  }
}
onMounted(() => {
  useFixeWidth();
});

//watch
watch(inputValue, (val, preVal) => {
  format(val, preVal);
});

watch(
  () => [props.pageSize, props.pageCurrent],
  ([size, current]) => {
    pageSize.value = size;
    simpleSize.value = size;
    pageCurrent.value = current;
  }
);

//computed
const formatValue = computed(() => {
  if (inputValue.value === "-") return "-";
  return formatNumber(inputValue.value);
});
</script>

<style lang="less" scoped>
.tableFootContaienr {
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 0 8px;
  z-index: 5;
  //transition: all 0.3s linear;

  .tablePaganations {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .paginationSetting {
    display: flex;
    flex-direction: row;

    .paginations {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;

      .paginations-input {
        position: absolute;
        right: 22px;
        top: 1px;
        width: 44px;
        height: 24px;
      }

      .paginations-input-simple {
        text-align: center;
        position: absolute;
        left: 44px;
        // top: 0.5px;
        width: 54px;
        height: 24px;

        input {
          width: 54px;
        }
      }
    }
  }

  ::v-deep(.ant-pagination-simple-pager) {
    input {
      width: 54px;
    }
  }

  .paginationSettingtext {
    margin-left: 20px;
  }

  .paginationSettingtext span {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
  }

  .pagination {
    margin-top: 10px;
    text-align: right;
  }

  ::v-deep(.ant-checkbox + span) {
    padding-left: 12px;
    padding-right: 8px;
  }

  .paginations-input {
    display: none;
  }
}



::v-deep(.simple-select .ant-select-selector) {
  height: 24px;
  align-items: center;
}


.iconS {
  display: inline-block;
  width: 24px;
  height: 24px;

  .iconfont {
    font-size: 24px;
  }
}

.tableFootContaienrEnd {
  justify-content: flex-end;
}

.table-bottom_fiexd {
  position: fixed;
  bottom: 0px;
  box-shadow: 0px -12px 48px 16px rgba(0, 0, 0, 0.03), 0px -9px 28px 0px rgba(0, 0, 0, 0.05), 0px -6px 16px -8px rgba(0, 0, 0, 0.08);
  height: 48px;
  padding: 0 20px;
}
</style>
